<script setup lang="ts">
import { ref, watch, computed } from "vue";
import ProjectSelector from "@/components/Selector/ProjectSelector.vue";
import { fileList } from "@/api/profile.ts";
import { fileType } from "@/constants/project.ts";
import UserSelector from "@/components/Selector/UserSelector.vue";

defineOptions({
  name: "profile"
});

let projectId = ref("");
let files = ref([]);

const defaultProps = {
  children: "children",
  label: "name"
};
let tree = ref(
  Object.entries(fileType).map(value => {
    return { name: value[1], value: value[0] };
  })
);
console.log({ tree: tree.value });

watch(projectId, async nv => {
  if (nv) {
    let res = await fileList(nv);
    files.value = res.data;
  }
});
let curFileType = ref(1);
let tableData = computed(() => {
  return files.value.filter(f => f.fileType == curFileType.value);
});
function handleNodeClick(data) {
  curFileType.value = data.value;
}
function down(row) {
  location.assign(row.url);
}
</script>

<template>
  <div>
    <div>项目： <project-selector v-model="projectId" select-first /></div>
    <el-container>
      <el-main>
        <el-tree
          style="width: 200px; max-width: 600px"
          :data="tree"
          :props="defaultProps"
          :default-expanded-keys="[2, 3]"
          @node-click="handleNodeClick"
        />
      </el-main>
      <el-main>
        <el-table
          :data="tableData"
          border
          style="width: 100%; margin-top: 20px"
          row-key="uuid"
        >
          <el-table-column prop="name" width="250px" label="文件名称" />
          <el-table-column prop="createTime" width="250px" label="创建时间" />
          <el-table-column label="创建人">
            <template v-slot="scope">
              <user-selector v-model="scope.row.creator.id" disabled />
            </template>
          </el-table-column>
          <el-table-column label="文件类型">
            <template v-slot="scope">
              {{ fileType[scope.row.fileType] }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button type="primary" @click="down(scope.row)"
                >下载</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>
